{% extends "scm/base.html" %}

{% block content %}
<style>

    /* =====================================================
       PO CREATE - SAME STYLE AS PO EDIT
       ===================================================== */

    .po-edit-page {
        background-color: #f8f9fa;
    }

    /* Card utama */
    .po-edit-page .card {
        border: 1px solid #d1d5d9;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: none;
    }

    /* Header section */
    .po-edit-page .card-header {
        background-color: #dfe3e7 !important;
        color: #17202a !important;
        border-bottom: 1px solid #c9ced3;
        font-size: 16px;
        font-weight: 500;
        padding: 12px 18px;
    }

    /* Header detail table */
    .po-edit-page .detail-header {
        background-color: #5d6b78 !important;
        color: white !important;
        font-weight: 600;
    }

    /* Body card */
    .po-edit-page .card-body {
        background-color: #dfe3e7;
    }

    /* Input */
    .po-edit-page .form-control,
    .po-edit-page .form-select {
        background-color: #ffffff;
        border: 1px solid #d5dbe0;
        border-radius: 6px;
        min-height: 44px;
    }

    .po-edit-page textarea.form-control {
        min-height: 100px;
    }

    /* Label */
    .po-edit-page .form-label {
        color: #17202a;
        font-weight: 400;
        margin-bottom: 7px;
    }

    /* Detail table */
    .po-edit-page .detail-table {
        margin-bottom: 0;
    }

    .po-edit-page .detail-table thead th {
        background-color: #5d6b78 !important;
        color: white !important;
        border-color: #5d6b78 !important;
        font-weight: 600;
        vertical-align: middle;
        white-space: nowrap;
    }

    .po-edit-page .detail-table tbody td {
        background-color: #ffffff;
        vertical-align: middle;
    }

    .po-edit-page .detail-table tbody tr:hover td {
        background-color: #f5f6f7;
    }

    /* Detail card body */
    .po-edit-page .detail-card-body {
        background-color: #ffffff;
    }

    /* Button */
    .po-edit-page .btn {
        border-radius: 6px;
    }

</style>

<div class="container-fluid po-edit-page">
    <div class="d-flex justify-content-between align-items-center mb-3">

        <h4>
            Create Purchase Order
        </h4>

        <a href="{% url 'po' %}" class="btn btn-secondary">
            Back
        </a>

    </div>


    <!-- ================================================= -->
    <!-- PR INFORMATION -->
    <!-- ================================================= -->

    <div class="card mb-3">

        <div class="card-header">
            Purchase Request Information
        </div>

        <div class="card-body">

            <div class="row">

                <div class="col-md-3">

                    <label class="form-label">
                        PR No.
                    </label>

                    <input type="text" class="form-control" value="{{ pr.pr_no }}" readonly>

                </div>


                <div class="col-md-3">

                    <label class="form-label">
                        PR Date
                    </label>

                    <input type="text" class="form-control" value="{{ pr.pr_date|date:'d-m-Y' }}" readonly>

                </div>


                <div class="col-md-6">

                    <label class="form-label">
                        PR Title
                    </label>

                    <input type="text" class="form-control" value="{{ pr.pr_title }}" readonly>

                </div>

            </div>


            <div class="row mt-3">

                <div class="col-md-4">

                    <label class="form-label">
                        Department
                    </label>

                    <input type="text" name="department_display" class="form-control" value="{{ pr.department }}"
                        readonly>

                </div>


                <div class="col-md-4">

                    <label class="form-label">
                        Cost Center
                    </label>

                    <input type="text" class="form-control" value="{{ pr.cost_center }}" readonly>

                </div>


                <div class="col-md-4">

                    <label class="form-label">
                        Source of Fund
                    </label>

                    <input type="text" class="form-control" value="{{ pr.source_of_fund }}" readonly>

                </div>

            </div>

        </div>

    </div>


    <!-- ================================================= -->
    <!-- PO HEADER -->
    <!-- ================================================= -->

    <form method="post">

        {% csrf_token %}


        <div class="card mb-3">

            <div class="card-header">   
                    Purchase Order Information
            </div>


            <div class="card-body">

                <div class="row">

                    <div class="col-md-3">

                        <label class="form-label">
                            PO No. *
                        </label>

                        <input type="text" name="po_no" class="form-control" placeholder="PO-260001" required>

                    </div>


                    <div class="col-md-3">

                        <label class="form-label">
                            PO Date *
                        </label>

                        <input type="date" name="po_date" class="form-control" required>

                    </div>


                    <div class="col-md-6">

                        <label class="form-label">
                            PO Title *
                        </label>

                        <input type="text" name="po_title" class="form-control" value="{{ pr.pr_title }}" required>

                    </div>

                </div>


                <!-- Vendor -->

                <div class="row mt-3">

                    <div class="col-md-6">

                        <label class="form-label">
                            Vendor *
                        </label>

                        <input type="text" name="vendor" class="form-control" list="vendorList"
                            placeholder="Type vendor name..." autocomplete="off" required>

                        <datalist id="vendorList">
                            {% for vendor in vendors %}
                            <option value="{{ vendor.vendorname }}">
                                {{ vendor.vendorcode }} - {{ vendor.vendorname }}
                            </option>
                            {% endfor %}
                        </datalist>

                    </div>

                    <div class="col-md-3">

                        <label class="form-label">
                            Currency
                        </label>

                        <select name="currency" class="form-select">

                            <option value="IDR">
                                IDR
                            </option>

                            <option value="USD" selected>
                                USD
                            </option>

                        </select>

                    </div>


                    <div class="col-md-3">

                        <label class="form-label">
                            Delivery Date
                        </label>

                        <input type="date" name="delivery_date" class="form-control">

                    </div>

                </div>


                <div class="row mt-3">

                    <div class="col-md-4">

                        <label class="form-label">
                            Department
                        </label>

                        <input type="text" name="department" class="form-control" value="{{ pr.department }}">

                    </div>


                    <div class="col-md-4">

                        <label class="form-label">
                            Cost Center
                        </label>

                        <input type="text" name="cost_center" class="form-control" value="{{ pr.cost_center }}">

                    </div>


                    <div class="col-md-4">

                        <label class="form-label">
                            Source of Fund
                        </label>

                        <input type="text" name="source_of_fund" class="form-control" value="{{ pr.source_of_fund }}">

                    </div>

                </div>


                <div class="row mt-3">

                    <div class="col-md-6">

                        <label class="form-label">
                            Payment Terms
                        </label>

                        <input type="text" name="payment_terms" class="form-control" placeholder="Example: 30 Days">

                    </div>


                    <div class="col-md-6">

                        <label class="form-label">
                            Delivery Terms
                        </label>

                        <input type="text" name="delivery_terms" class="form-control"
                            placeholder="Example: Delivered to warehouse">

                    </div>

                </div>


                <div class="mt-3">

                    <label class="form-label">
                        Remarks
                    </label>

                    <textarea name="remarks" class="form-control" rows="3"></textarea>

                </div>

            </div>

        </div>


        <!-- ================================================= -->
        <!-- PO DETAIL -->
        <!-- ================================================= -->

        <div class="card mb-3">

            <div class="card-header detail-header">
                Purchase Order Detail
            </div>


            <div class="card-body p-0">

                <div class="table-responsive">

                    <table class="table table-bordered table-sm mb-0 detail-table">

                        <thead>

                            <tr>

                                <th width="45">
                                    No
                                </th>

                                <th>
                                    KIMAP
                                </th>

                                <th>
                                    Description
                                </th>

                                <th>
                                    Account
                                </th>

                                <th width="100">
                                    Qty
                                </th>

                                <th width="80">
                                    UOM
                                </th>

                                <th width="150">
                                    Unit Price
                                </th>

                                <th width="160">
                                    Amount
                                </th>

                                <th width="150">
                                    Delivery Date
                                </th>

                                <th>
                                    Location
                                </th>

                            </tr>

                        </thead>


                        <tbody>

                            {% for d in details %}

                            <tr>

                                <td class="text-center">
                                    {{ forloop.counter }}
                                </td>


                                <td>

                                    {{ d.kimap }}

                                    <input type="hidden" name="pr_detail_id_{{ d.id }}" value="{{ d.id }}">

                                </td>


                                <td>
                                    {{ d.description }}
                                </td>


                                <td>
                                    {{ d.acct_no }}
                                </td>


                                <td class="text-end">

                                    {{ d.quantity }}

                                </td>


                                <td>
                                    {{ d.uom }}
                                </td>


                                <td>

                                    <input type="number" name="unit_price_{{ d.id }}"
                                        class="form-control form-control-sm unit-price" data-row="{{ d.id }}" value="0"
                                        min="0" step="0.0001">

                                </td>


                                <td>

                                    <input type="text" id="amount_{{ d.id }}"
                                        class="form-control form-control-sm amount" value="0" readonly>

                                </td>


                                <td>

                                    <input type="date" name="delivery_date_{{ d.id }}"
                                        class="form-control form-control-sm">

                                </td>


                                <td>
                                    {{ d.location }}
                                </td>

                            </tr>

                            {% endfor %}

                        </tbody>

                    </table>

                </div>

            </div>

        </div>


        <!-- ================================================= -->
        <!-- BUTTON -->
        <!-- ================================================= -->

        <div class="d-flex justify-content-end gap-2 mb-4">

            <a href="{% url 'po' %}" class="btn btn-secondary">

                Cancel

            </a>


            <button type="submit" class="btn btn-primary">

                <i class="bi bi-save"></i>

                Create PO

            </button>

        </div>


    </form>

</div>


<script>

    document.addEventListener(
        "DOMContentLoaded",
        function () {

            const inputs =
                document.querySelectorAll(
                    ".unit-price"
                );


            inputs.forEach(
                function (input) {

                    input.addEventListener(
                        "input",
                        function () {

                            const id =
                                this.dataset.row;

                            const row =
                                this.closest("tr");

                            const qty =
                                parseFloat(
                                    row.cells[4]
                                        .innerText
                                ) || 0;

                            const price =
                                parseFloat(
                                    this.value
                                ) || 0;

                            const amount =
                                qty * price;

                            document.getElementById(
                                "amount_" + id
                            ).value =
                                amount.toLocaleString(
                                    "en-US",
                                    {
                                        minimumFractionDigits: 2,
                                        maximumFractionDigits: 4
                                    }
                                );

                        }
                    );

                }
            );

        }
    );

</script>

{% endblock %}